<template>
    <div>
        <el-form label-position="left" label-width="100px" v-model="simpleRadar">
            <el-form-item label="中心横坐标">
              <el-input v-model="simpleRadar.center[0]" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="中心纵坐标">
              <el-input v-model="simpleRadar.center[1]" size="mini"></el-input>
            </el-form-item>
            <el-form-item  label="起始角度">
                <el-input-number v-model="simpleRadar.startAngle" :min="0" :max="360" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item label="内半径">
              <el-input v-model="simpleRadar.radius[0]" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="外半径">
              <el-input v-model="simpleRadar.radius[1]" size="mini"></el-input>
            </el-form-item>
            <el-form-item  label="形状">
               <el-select v-model="simpleRadar.shape" placeholder="polygon" size="mini">
                <el-option label="正多边形" value="polygon"/>
                <el-option label="圆形" value="circle"/>
              </el-select>
            </el-form-item>
            <el-form-item  label="分隔数">
                <el-input-number v-model="simpleRadar.splitNumber" :min="0" :max="20" size="mini"></el-input-number>
            </el-form-item>
            <el-divider content-position="center">轴名</el-divider>
            <el-form-item  label="间距">
                <el-input-number v-model="simpleRadar.nameGap" :min="0" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item label="颜色">
              <el-color-picker v-model="simpleRadar.name.textStyle.color" show-alpha size="small" @active-change="nameTextStyleColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="字体">
               <el-select v-model="simpleRadar.name.textStyle.fontFamily" placeholder="normal" size="mini">
                <el-option label="serif" value="serif"/>
                <el-option label="monospace" value="monospace"/>
                <el-option label="Courier New" value="Courier New"/>
                <el-option label="Microsoft YaHei" value="Microsoft YaHei"/>
              </el-select>
            </el-form-item>
            <el-form-item  label="字号">
              <el-input-number v-model="simpleRadar.name.textStyle.fontSize" :min="0" :max="100" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="粗细">
              <el-select v-model="simpleRadar.name.textStyle.fontWeight" placeholder="normal" size="mini">
                <el-option label="normal" value="normal"/>
                <el-option label="bold" value="bold"/>
                <el-option label="bolder" value="bolder"/>
                <el-option label="lighter" value="lighter"/>
              </el-select>
            </el-form-item>
            <el-divider content-position="center">轴线</el-divider>
            <el-form-item label="颜色">
              <el-color-picker v-model="simpleRadar.axisLine.lineStyle.color" show-alpha size="small" @active-change="axisLineLineStyleColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="宽度">
                <el-input-number v-model="simpleRadar.axisLine.lineStyle.width" :min="0" :max="20" size="mini"/>
            </el-form-item>
            <el-form-item  label="类型">
               <el-select v-model="simpleRadar.axisLine.lineStyle.type" placeholder="solid" size="mini">
                <el-option label="————————" value="solid"/>
                <el-option label="------------------------" value="dashed"/>
                <el-option label="························" value="dotted"/>
              </el-select>
            </el-form-item>
            <el-divider content-position="center">刻度</el-divider>
            <el-form-item label="显示">
              <el-radio v-model="simpleRadar.axisTick.show" :label="true">是</el-radio>
              <el-radio v-model="simpleRadar.axisTick.show" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item  label="长度">
                <el-input-number v-model="simpleRadar.axisTick.length" :min="0" :max="20" size="mini"/>
            </el-form-item>
            <el-form-item label="颜色">
              <el-color-picker v-model="simpleRadar.axisTick.lineStyle.color" show-alpha size="small" @active-change="axisTickLinestyleColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="宽度">
                <el-input-number v-model="simpleRadar.axisTick.lineStyle.width" :min="0" :max="20" size="mini"/>
            </el-form-item>
            <el-divider content-position="center">分隔线</el-divider>
            <el-form-item label="颜色">
              <el-color-picker v-model="simpleRadar.splitLine.lineStyle.color" show-alpha size="small" @active-change="splitLineLineStyleColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="宽度">
                <el-input-number v-model="simpleRadar.splitLine.lineStyle.width" :min="0" :max="20" size="mini"/>
            </el-form-item>
            <el-form-item  label="类型">
               <el-select v-model="simpleRadar.splitLine.lineStyle.type" placeholder="solid" size="mini">
                <el-option label="————————" value="solid"/>
                <el-option label="------------------------" value="dashed"/>
                <el-option label="························" value="dotted"/>
              </el-select>
            </el-form-item>
            <el-divider content-position="center">分隔区域</el-divider>
            <el-form-item label="显示">
              <el-radio v-model="simpleRadar.splitArea.show" :label="true">是</el-radio>
              <el-radio v-model="simpleRadar.splitArea.show" :label="false">否</el-radio>
            </el-form-item>
            <el-divider content-position="center">轴标签</el-divider>
            <el-form-item label="显示">
              <el-radio v-model="simpleRadar.axisLabel.show" :label="true">是</el-radio>
              <el-radio v-model="simpleRadar.axisLabel.show" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="颜色">
              <el-color-picker v-model="simpleRadar.axisLabel.color" show-alpha size="small" @active-change="axisLabelColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="字体">
               <el-select v-model="simpleRadar.axisLabel.fontFamily" placeholder="serif" size="mini">
                <el-option label="serif" value="serif"/>
                <el-option label="monospace" value="monospace"/>
                <el-option label="Courier New" value="Courier New"/>
                <el-option label="Microsoft YaHei" value="Microsoft YaHei"/>
              </el-select>
            </el-form-item>
            <el-form-item  label="字号">
              <el-input-number v-model="simpleRadar.axisLabel.fontSize" :min="0" :max="100" size="mini"></el-input-number>
            </el-form-item>
            <el-form-item  label="粗细">
              <el-select v-model="simpleRadar.axisLabel.fontWeight" placeholder="normal" size="mini">
                <el-option label="normal" value="normal"/>
                <el-option label="bold" value="bold"/>
                <el-option label="bolder" value="bolder"/>
                <el-option label="lighter" value="lighter"/>
              </el-select>
            </el-form-item>
            <el-divider content-position="center">区域样式</el-divider>
            <el-form-item  label="不透明度">
                <el-input-number v-model="simpleRadar.areaStyle.opacity" :precision="2" :step="0.05" :min="0" :max="1" size="mini"/>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
  data: function () {
    return {
    }
  },
  methods: {
    nameTextStyleColor (val) {
      this.simpleRadar.name.textStyle.color = val
    },
    axisLineLineStyleColor (val) {
      this.simpleRadar.axisLine.lineStyle.color = val
    },
    splitLineLineStyleColor (val) {
      this.simpleRadar.splitLine.lineStyle.color = val
    },
    axisTickLinestyleColor (val) {
      this.simpleRadar.axisTick.lineStyle.color = val
    },
    axisLabelColor (val) {
      this.simpleRadar.axisLabel.color = val
    }
  },
  computed: {
    simpleRadar () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemContent.detail.simpleRadar
    }
  },
  watch: {
  },
  components: {
  }
}
</script>

<style scoped>
    .el-form-item {
        margin-bottom: 0px
    }
</style>
